<template>
  <div class="student-homework-container">
    <h2>学生作业完成情况</h2>
    <el-table :data="homeworkData" style="width: 100%" border stripe>
      <el-table-column prop="name" label="学生姓名" width="180"></el-table-column>
      <el-table-column prop="homework" label="作业名称"></el-table-column>
      <el-table-column prop="status" label="完成状态" width="120">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status === '已完成' ? 'success' : 'danger'">
            {{ scope.row.status }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="score" label="分数" width="100"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'StudentHomework',
  data() {
    return {
      homeworkData: []
    };
  },
  created() {
    this.generateFakeData();
  },
  methods: {
    generateFakeData() {
      this.homeworkData = [
        { name: '张三', homework: '数学作业第一章', status: '已完成', score: 95 },
        { name: '李四', homework: '语文作文', status: '未完成', score: null },
        { name: '王五', homework: '英语听力练习', status: '已完成', score: 88 },
        { name: '张三', homework: '物理实验报告', status: '已完成', score: 92 },
        { name: '李四', homework: '化学方程式练习', status: '已完成', score: 78 },
        { name: '王五', homework: '历史小论文', status: '未完成', score: null },
        { name: '张三', homework: '生物课后习题', status: '已完成', score: 90 },
        { name: '李四', homework: '地理地图绘制', status: '已完成', score: 85 },
      ];
    }
  }
};
</script>

<style scoped>
.student-homework-container {
  padding: 20px;
}

.student-homework-container h2 {
  text-align: center;
  margin-bottom: 20px;
  color: #333;
}

/* 可以根据需要添加更多样式来美化表格 */
</style>
